<template>
	<div id="box">
		<div class='container'>

			<div class='bk bk_one'>
				<Top/>
				<Title/>
				<div id='banner_title'>
					<img src="../../../static/imgs/banner/banner.png" alt="" />
				</div>
				<div class='yy'></div>
				<div id='lis'>
					<ul class='lis_ul_1 clearfix'>
						<li v-for='(item,index) in lis_1' :key="index">
							<div class='lis_img'>
								<img :src="item.src" alt="" />
							</div>
							<p>{{item.txt}}</p>
						</li>
					</ul>
				</div>
				<Froms/>
				<!--为什么选择美肌工坊-->
				<div id='F1'>
					<div class="title_base">
						<h2><b>为什么选择美肌工坊?</b></h2>
					</div>
          <img src="../../../static/imgs/img3/155.png" alt="">
          <img src="../../../static/imgs/img3/newT.png" alt="">
          <img src="../../../static/imgs/img3/157.png" alt="">
          <img src="../../../static/imgs/img3/156.png" alt="">
				</div>
			</div>

			<div class='bk bk_tow'>

				<!--五大赋能扶持体系-->
				<div id='F2'>
					<div class="title_base">
						<h2><b>五大赋能扶持体系</b></h2>
						<h3>一站解决开店难题</h3>
					</div>
					<div class='f2_con'>
						<img src="../../../static/imgs/img3/jmys-1.png" alt="" />
					</div>

				</div>
				<!--全局渠道引流，轻松开店-->
				<div id='F3' class='base_f1'>
					<div class="title_base">
						<h2><b>全局渠道引流</b></h2>
						<h3>轻松开店，客源无忧</h3>
					</div>
					<ul class="clearfix">
						<li v-for='(item,index) in F3_list' :key="index">
							<h4><b>{{item.tit}}</b></h4>
							<p>{{item.txt}}</p>
						</li>
					</ul>

				</div>
				<!--全年培训输出-->
				<div id='F4'>
					<div class="title_base">
						<h2><b>全国培训输出</b></h2>
						<h3>全国性皮肤管理师项目培训机构</h3>
					</div>
					<div class='f4_con'>
						<ul class='clearfix'>
							<li v-for='(item,index) in F4_list' :key="index">
								<h3><b>{{item.tit}}</b></h3>
								<p>{{item.txt}}</p>
							</li>
						</ul>
					</div>

				</div>
				<!--智慧仓储-->
				<div id='F5' class='base_f1'>
					<div class="title_base">
						<h2><b>智慧仓储</b></h2>
						<h3>智能调配灵活补货</h3>
					</div>
					<ul class="clearfix">
						<li v-for='(item,index) in F5_list' :key="index">
							<h4><b>{{item.tit}}</b></h4>
							<p>{{item.txt}}</p>
						</li>
					</ul>

				</div>

			</div>

			<div class='bk bk_three'>
				<!--IT系统入驻-->
				<div id='F6'>
					<div class="title_base">
						<h2><b>IT系统入驻</b></h2>
						<h3>随时管控，省心运营</h3>
					</div>
					<div class="f6_con">
						<img src="../../../static/imgs/img3/phoneyun.png" alt="" />
					</div>

				</div>
				<!--全年品牌营销-->
				<div id='F7'>
					<div class="title_base">
						<h2><b>全年品牌营销</b></h2>
						<h3>连锁效应，自带流量</h3>
					</div>
					<div class="f7_con">
						<ul class="clearfix">
							<li class='clearfix'>
								<div class="item_fl item"><img style="border-radius: 10px;" src="../../../static/imgs/img3/dw.png" /></div>
								<div class='item_fr item'>
									<h3>选址评估</h3>
									<p>根据用户群体画像，科学分析门店周边环境，确保为加盟门店选到优质的门店位置。</p>
									<span class='xian'></span>
								</div>
							</li>
							<li class='clearfix'>
								<div class="item_fl item"><img src="../../../static/imgs/img3/b.png" /></div>
								<div class='item_fr item'>
									<h3>门店设计</h3>
									<p>总部提供终端门店形象设计，统一风格，标准化装修，实现场景化营销。</p>
									<span class='xian'></span>
								</div>
							</li>

							<li class='clearfix'>
								<div class="item_fl item"><img src="../../../static/imgs/img3/home.png" /></div>
								<div class='item_fr item'>
									<h3>品牌活动</h3>
									<p>总部安排门店开展统一营销活动，构建门店线上线下营销闭环，实现品效合一。</p>
									<span class='xian'></span>
								</div>
							</li>

							<li class='clearfix'>
								<div class="item_fl item"><img src="../../../static/imgs/img3/b.png" /></div>
								<div class='item_fr item'>
									<h3>整店输出</h3>
									<p>全国18家直营店，600余家加盟门店，整店输出，成功经验直接复制，开店不费心。</p>
									<span class='xian'></span>
								</div>
							</li>
							<li class='clearfix'>
								<div class="item_fl item"><img src="../../../static/imgs/img3/home.png" /></div>
								<div class='item_fr item'>
									<h3>美肌内容社区</h3>
									<p>共享美肌品牌内容，以内容价值搭建情感纽带，有力维系用户，深度挖掘用户需求与价值。</p>
									<span class='xian'></span>
								</div>
							</li>
						</ul>
					</div>

				</div>

			</div>
			<div class='bk bk_four'>
				<!--相比其它美容院-->
				<div id='F8'>
					<div class="title_base">
						<h2><b>相比其它美容院</b></h2>
						<h3>美肌工坊有何不同</h3>
					</div>
					<div class="f8_con">
						<img src="../../../static/imgs/img3/table.png" alt="" />
					</div>
				</div>
				<!--一站式开店支持-->
				<div id='F9'>
					<div class="title_base">
						<h2><b>一站式开店支持</b></h2>
						<h3>助您制胜市场</h3>
					</div>
					<div class="f9_con">
						<ul class='clearfix'>
							<li v-for="(item,index) in F9_list" :key="index">
								<h4 v-if="item.tit!=null">{{item.tit}}</h4>
								<p v-if='item.txt!=null'>{{item.txt}}</p>
								<div v-if='item.txt==null' class="F9_img">
									<img src="../../../static/imgs/img3/home.png" alt="" />
								</div>
							</li>
						</ul>
					</div>

				</div>
				<!--共同选择-->
				<div id='F10'>
					<div class="title_base">
						<h2><b>600多位加盟商的</b></h2>
						<h3>共同选择</h3>
					</div>
					<div class="f10_con">
						<img src="../../../static/imgs/img3/hz.png" alt="" />
					</div>
				</div>
				<div id='zhong'><span>邀您见证</span></div>
				<fromsmin/>
			</div>
			<Foot/>
		</div>
	</div>
</template>

<script>
import Top from "../components/base/Top.vue";
import Title from "../components/base/title.vue";
import SowingMap from "../components/home/sowingMap.vue";
import Froms from "../components/cooper/froms";
import Foot from "../components/base/foot.vue";
import fromsmin from "../components/cooper/fromsmin.vue";

export default {
  name: "Cooperation",
  components: {
    Top,
    Title,
    SowingMap,
    fromsmin,
    Froms,
    Foot
  },
  data() {
    return {
      lis_1: [
        {
          src: "../../../static/imgs/img3/s4.png",
          txt: "加盟无需经验"
        },
        {
          src: "../../../static/imgs/img3/s1.png",
          txt: "全年教育培训"
        },
        {
          src: "../../../static/imgs/img3/s2.png",
          txt: "开店即有客源"
        },
        {
          src: "../../../static/imgs/img3/s5.png",
          txt: "协助开店运营"
        }
      ],
      //渠道引流
      F3_list: [
        {
          tit: "全网引流支持",
          txt:
            "打通美团/大众点评/新氧/口碑等大流量平台，不管你在哪里均可点对点为门店输送流量。"
        },
        {
          tit: "各大平台头部商家地位",
          txt:
            "美团、大众点评、口碑、新氧专属独家资源，流量倾斜，品牌效应强强联合。"
        },
        {
          tit: "全网营销支持",
          txt:
            "4A级运营团队全年多平台精心策划，助力门店拓客、锁客、留客、升客，深度挖掘用户价值。 "
        },
        {
          tit: "导师驻店引流支持",
          txt: "导师下店，帮助当地门店扩大用户流量，助力当地门店业绩快速增长。"
        }
      ],
      //智慧仓储
      F5_list: [
        {
          tit: "合理品控",
          txt: "智能供应链支持，系统实时监控，周期性合理调配。"
        },
        {
          tit: "一卡通用、会员共享",
          txt: "全国门店会员，一卡在手，千店共享，产品实时系统结算。"
        },
        {
          tit: "千店库存联网",
          txt: "千店库存联网，及时调配，保证门店库存合理，智能调配灵活补货。"
        },
        {
          tit: "快速更替",
          txt: "最新产品快速迭代，门店业绩持续增高。"
        }
      ],
      //全年培训
      F4_list: [
        {
          src: "../../../static/imgs/login/s1.png",
          tit: "全国皮肤管理师培训认证",
          txt:
            "作为“全国皮肤管理师培训项目管理办公室”主任单位，将负责《皮肤管理师》项目培训认证工作在全国的推广与实施，为国家输出专业皮肤管理师人才。"
        },
        {
          src: "../../../static/imgs/login/s6.png",
          tit: "全面",
          txt:
            "标准化建设+完整学习规划，传授最新科技美容知识及全面的门店经营攻略。"
        },
        {
          src: "../../../static/imgs/login/s4.png",
          tit: "实战",
          txt: "1对1实战指导，美业大咖手把手教学门店运营，包教包会。"
        },
        {
          src: "../../../static/imgs/login/s2.png",
          tit: "专业",
          txt: "按照市场需求设计课程，从店员到店长传授整套科技美容教育系统。"
        },
        {
          src: "../../../static/imgs/login/s3.png",
          tit: "定制",
          txt: "全年根据门店状况，开设不同班级，阶段性，系统性，针对性教学。"
        }
      ],
      F9_list: [
        {
          tit: "品牌形象",
          txt: "统一门店形象输出 高度标准化复制"
        },
        {
          tit: "店面装修",
          txt: "总部协助选址、店面规划、装修设计"
        },
        {
          tit: "下店指导",
          txt: "导师下店协助，传授全套门店经营攻略"
        },
        {
          tit: "技术培训",
          txt: "全年系统皮肤管理培训，手把手教学， 包教包会"
        },
        {
          tit: null,
          txt: null
        },
        {
          tit: "货品筹备",
          txt: "开业产品+仪器配送 让你赢在起跑线"
        },
        {
          tit: "活动策划",
          txt: "全年活动策划 阶段引爆客流"
        },
        {
          tit: "营销推广",
          txt: "多渠道营销推广 开店坐享客流"
        },
        {
          tit: "经营指导",
          txt: "后期经营指导 助力门店持续盈利"
        }
      ]
    };
  }
};
</script>

<style scoped lang='scss'>
input {
  border: 1px solid #000;
}

#zhong {
  width: 100%;
  height: 2px;
  background-color: #f5855f;
  text-align: center;
  line-height: 0px;
  span {
    padding: 0 10px;
    background: #fff;
    color: #f5855f;
    font-size: 28px;
  }
}

#box {
  background-color: #fff;
  width: 100%;
}

.yy {
  		width: 1356px;
		height: 75px;
		margin: 0 auto;
		background: url(../../../static/imgs/bk/yy.png);
}
/*背景图片*/

.bk {
  width: 100%;
}

.bk_one {
  background: url(../../../static/imgs/bk/bk_1.jpg) no-repeat;
}

.bk_tow {
  background: url(../../../static/imgs/bk/bk_2.jpg) no-repeat;
}

.bk_three {
  background: url(../../../static/imgs/bk/bk_3.jpg) no-repeat;
}

.bk_four {
  background: url(../../../static/imgs/bk/bk_4.jpg) no-repeat;
}

#banner_title {
  width: 100%;
  text-align: center;
  padding-bottom: 100px;
}

#lis {
  margin: 0 auto;
  width: 1296px;
  ul {
    padding: 40px 0 100px 0;
    li:nth-child(2n-1) {
      background: #f1f1f1;
    }
    li {
      float: left;
      width: 324px;
      height: 234px;
      background-color: #f9f9f9;
      .lis_img {
        height: 150px;
        line-height: 150px;
        width: 100%;
        text-align: center;
      }
      p {
        width: 100%;
        text-align: center;
        color: #555451;
        font-size: 31px;
        font-weight: bold;
      }
    }
  }
}
/*标题*/

.title_base {
  padding-top: 108px;
  h2 {
    text-align: center;
    font-size: 58px;
    font-family: SourceHanSansCN-Heavy;
    color: #f5855f;
    line-height: 104px;
  }
  h3 {
    font-size: 41px;
    font-family: SourceHanSansCN-Regular;
    color: #555451;
    text-align: center;
  }
}
/*为什么选择美肌工坊*/

#F1 {
 width:1500px;
 text-align: center;
 border:2px solid #F7855A;
 border-top: 0px ;
 margin: 0 auto;
 margin-top:150px;
 img{
   margin:60px 0;
 }
 .title_base{
   transform: translateY(-50%);
    padding-top:0px;
    display: table;
    white-space: nowrap;
    text-align: center;
    background: transparent;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    font-size: 16px;
    margin: 16px 0;
 }
 .title_base::before,.title_base::after{
      content: '';
    display: table-cell;
    position: relative;
    top: 50%;
    width: 50%;
    border-top: 2px solid #F7855A;
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);

 }
}

#F2 {
  .f2_con {
    width: 100%;
    height: 930px;
    text-align: center;
  }
}
/*相同的两个样式*/
/*全渠道引流*/
.base_f1 {
  padding-bottom: 108px;
  ul {
    width: 1296px;
    margin: 0 auto;
    padding-top: 60px;
    li:nth-child(2n-1) {
      background-color: #f1f1f1;
    }
    li:nth-child(2n) {
      background-color: #f9f9f9;
    }
    li {
      width: 324px;
      height: 300px;
      float: left;
      padding-top: 50px;

      h4 {
        text-align: center;
        color: #555451;
        font-size: 29px;
      }
      p {
        padding-top: 20px;
        width: 275px;
        margin: 0 auto;
        color: #555451;
        font-size: 23px;
        /*text-align:center;*/
      }
    }
  }
}

#F4 {
  .f4_con {
    width: 100%;
    padding-top: 82px;
    ul {
      width: 825px;
      margin: 0 auto;
      border: 1px solid #f7855a;
      padding-left: 50px;
      li {
        padding: 30px 50px;
        h3 {
          font-size: 30px;
          font-family: SourceHanSansCN-Medium;
          color: #f5855f;
        }
        p {
          font-size: 25px;
          font-family: SourceHanSansCN-Regular;
          color: #555451;
          line-height: 31px;
        }
      }
      li:nth-child(3),
      li:nth-child(6) {
        margin-right: 0px;
      }
    }
  }
}

#F6 {
  .f6_con {
    padding: 50px;
    width: 100%;
    height: 893px;
    text-align: center;
  }
}

#F7 {
  .f7_con {
    width: 100%;
    height: 1471px;
    padding-bottom: 1000px;
    background: url(../../../static/imgs/img3/5.png) center center no-repeat;
    ul {
      position: relative;
      li {
        position: absolute;
        span {
          display: block;
          position: absolute;
        }
        .item {
          &.item_fr {
            padding-left: 25px;
            h3 {
              font-size: 37px;
              color: #f5855f;
              font-weight: bold;
            }
          }
          float: left;
          p {
            width: 320px;
            font-size: 22px;
            color: #555451;
          }
        }
      }
      /*span是那根线*/
      li:first-child {
        top: 126px;
        left: 340px;
        span {
          left: 55px;
          top: 100%;
          width: 5px;
          height: 320px;
          border-right: 2px dashed #f5855f;
        }
      }
      li:nth-child(2) {
        top: 269px;
        left: 850px;
        span {
          left: 55px;
          top: 100%;
          width: 5px;
          height: 320px;
          border-right: 2px dashed #f5855f;
        }
      }
      li:nth-child(3) {
        top: 140px;
        left: 1380px;
        span {
          left: 55px;
          top: 100%;
          width: 5px;
          height: 320px;
          border-right: 2px dashed #f5855f;
        }
      }
      li:nth-child(4) {
        top: 1081px;
        left: 408px;
        span {
          left: 55px;
          top: -324px;
          width: 5px;
          height: 320px;
          border-right: 2px dashed #f5855f;
        }
      }
      li:last-child {
        top: 1190px;
        left: 1100px;
        span {
          left: 55px;
          top: -324px;
          width: 5px;
          height: 320px;
          border-right: 2px dashed #f5855f;
        }
      }
    }
  }
}

#F8 {
  .f8_con {
    margin: 46px auto;
    width: 724px;
    height: 774px;
  }
}

#F9 {
  .f9_con {
    margin: 46px auto;
    width: 752px;
    height: 550px;
    ul {
      li {
        width: 248px;
        height: 181px;
        padding: 45px;
        background-color: #f1f1f1;
        float: left;
        .F9_img {
          text-align: center;
        }
        h4 {
          color: #f5855f;
          text-align: center;
          font-size: 30px;
        }
        p {
          text-align: center;
        }
      }
      li:nth-child(2n-1) {
        background-color: #f9f9f9;
      }
    }
  }
}

#F10 {
  .f10_con {
    margin: 46px auto;
    width: 100%;
    height: 734px;
  }
}

#F11 {
  width: 873px;
  margin: 0 auto;
  padding-top: 106px;
  .title_left {
    h3 {
      font-size: 33px;
      font-family: SourceHanSansCN-Regular;
      color: #787878;
      line-height: 41px;
    }
    h2 {
      font-size: 43px;
      font-family: SourceHanSansCN-Heavy;
      color: #f5855f;
      line-height: 53px;
    }
    .img_lc {
      width: 873px;
      height: 200px;
      border: 1px solid #ccc;
    }
  }
  .f11_con {
    form {
      table {
        padding: 20px;
        border: 1px solid #000;
        width: 873px;
        height: 572px;
        tr {
          td:nth-child(1) {
            text-align: right;
          }
        }
      }
    }
  }
}
</style>